<!-- 收到报价 -->
<template>
	<view>
		<u-navbar :isFixed="true" title="收到报价" :borderBottom="false"></u-navbar>
		<go-top :scrollTop="scrollTop"></go-top>
		<view class="tabs">
			<u-tabs :list="tabs" :is-scroll="false" :current="order_type" @change="settab" bg-color="#F8F8F8"
				active-color="#38BE8C" bar-width="60"></u-tabs>
		</view>
		<!-- <view class="goods">
			<view class="goodsName">{{shop.titles}}</view>
			<view class="flex_bet_align">
				<view>采购数量：{{shop.number}}{{shop.unit}} | {{shop.stoptime}}截止</view>
				<view class="count">共收到{{shop.getdemandoffer_count}}个报价</view>
			</view>
			<view>求购地区：{{shop.city}}</view>
		</view> -->
		<view class="search flex_bet_align">
			<view class="flex_align left">
				<view class="sort" :class="status==0?'check':''" @click="select(0)">最新</view>

				<view class="flex_align sort" :class="status==1?'check':''" @click="select(1)">
					<view class="">价格</view>
					<view class="iconbox">
						<u-icon name="arrow-up-fill" :color="price=='up'?'#38BE8C':'#B1B8C8'" size="14"></u-icon>
						<u-icon name="arrow-down-fill" :color="price=='down'?'#38BE8C':'#B1B8C8'" size="14"></u-icon>
					</view>
				</view>

				<view class="flex_align sort" :class="status==2?'check':''" @click="select(2)">
					<view class="">距离</view>
					<view class="iconbox">
						<u-icon name="arrow-up-fill" :color="load=='up'?'#38BE8C':'#B1B8C8'" size="14"></u-icon>
						<u-icon name="arrow-down-fill" :color="load=='down'?'#38BE8C':'#B1B8C8'" size="14"></u-icon>
					</view>
				</view>
			</view>


			<view class="searchContent">
				<u-icon name="search" color="#B1B8C8" size="28" class="search_icon" @click="demand"></u-icon>
				<u-input v-model="searchKey" placeholder="搜索报价的商家" type="text" confirm-type="search" :border="false"
					placeholderStyle="color:#B1B8C8" class="search_" @confirm="demand" :clearable="false" />
				<u-icon name="close-circle" color="#C0C4CC" size="28" class="search_icon_c" @click="clear"
					v-if="searchKey.length>0">
				</u-icon>
			</view>
		</view>

		<view class="block"></view>
		<view class="wrap">
			<view class="item" v-for="(item,index) in list" :key="index">
				<view class="flex_bet_align">
					<navigator :url="'/home/station/stationpage?id='+item.client_uid" hover-class="none"
						class="flex_align">
						<image :src="item.shop_logo" mode="aspectFill" class="imghead"></image>

						<view class="">
							<view class="hover_box">
								<view class="">{{item.shop_name}}</view>
								<image :src="item.mimage" v-if="item.mimage" mode="heightFix">
								</image>
								<view class="xinyong_box">
									<view class="xin">信</view>
									<view class="xin_number">{{item.credit_value}}</view>
									<view class="shiming" v-if="item.realname">实</view>
									<view class="qiye" v-if="item.enterprise">企</view>
									<!-- <text class="bjnumbers">{{item.bj_num}}个报价</text> -->
								</view>
							</view>
							<view class="">{{item.mobile}}</view>
						</view>
					</navigator>

					<view class="attention" @click="attention(item,index)"> {{item.is_follow==0?'+关注':'已关注'}} </view>
				</view>

				<view class="center">
					<view class="top">{{shop.titles}}</view>
					<view class="title">￥{{item.money}}/{{item.unit}}【{{item.type==1?'上车价':'到货价'}}】</view>
					<!-- <view class="flex">
						<view class="iconfont icon-liaotian1"></view>
						<view class="iconfont icon-lujingbeifen3" @click="dialing(2,item.id,item.mobile)"></view>
					</view> -->
					<view class="m20">备注说明: {{item.client_not}}</view>
					<view class="flex_bet_align addw">
						<view class="">供货地址: {{item.city}}</view>
						<view class="" @click="openmap(item)">导航</view>
					</view>
				</view>
				<view class="m20">距离:{{item.juli}}km</view>
				<view class="flex_align m20">
					<view class="tbtn" @click="chat(item)">聊一聊</view>
					<view class="tbtn" @click="tell(item,index)">一键拨号</view>
					<view class="tbtn line">{{item.is_connect==1?'联系':'已联系'}}</view>
					<view class="tbtn have" @click="beixuan(item,index)">
						{{item.is_spare==1?' 备选':'已备选'}}
					</view>
					<view class="tbtn have" v-if="order_type!=4" @click="getgood(item)">采纳</view>
				</view>
				<!-- 	<view class="gallery flex_align">
					<block v-for="(item2,index2) in item.images" :key="index2">
						<image class="img" :src="item2" mode="aspectFill" @click="$plug.showImg(item.images,item2)">
						</image>
					</block>
				</view> -->
			</view>
		</view>
		<view class="nomore" v-if="nomore&&list.length>0">—— · 没有更多了 · ——</view>
	</view>
</template>

<script>
	var _this, $paginator, shak;
	export default {
		data() {
			return {
				list: [],
				nomore: false,
				// 回到头部按钮距离
				scrollTop: 0,
				shop: {},

				tabs: [{
						name: '全部'
					},
					{
						name: '未联系'
					},
					{
						name: '已联系'
					},
					{
						name: '备选'
					},
					{
						name: '已采纳'
					}
				],
				order_type: 0,
				searchKey: '',

				status: 0, //排序
				price: '', //价格排序 1-最新 2-最旧
				load: '', //距离排序1-最新 2-最旧
			}
		},
		onLoad(options) {
			_this = this
			_this.id = options.id
			$paginator = new _this.$paginator(_this.$api)
			_this.getdata(true)
		},
		//监听页面滚动
		onPageScroll(res) {
			this.scrollTop = res.scrollTop
		},
		//下拉刷新
		onPullDownRefresh() {
			$paginator = new _this.$paginator(_this.$api)
			_this.getdata(true)
		},
		onReachBottom: function() {
			$paginator.nextPager(() => {
				_this.getdata()
			})
		},
		methods: {
			getdata: function(firstLoad = false) {
				// _this.load
				let filter_price
				let filter_juli

				if (_this.price == 'up') {
					filter_price = 1
				} else if (_this.price == 'down') {
					filter_price = 2
				} else {
					filter_price = ""
				}

				if (_this.load == 'up') {
					filter_juli = 1
				} else if (_this.load == 'down') {
					filter_juli = 2
				} else {
					filter_juli = ""
				}

				$paginator.getData('receivedoffer', {
					id: _this.id,
					status: _this.order_type + 1,
					lat: wx.getStorageSync('address').lat,
					lon: wx.getStorageSync('address').long,
					search: _this.searchKey,
					filter_new: "",
					filter_price,
					filter_juli,
				}, (data) => {
					_this.shop = data
					$paginator.pageCount = data.offer.total_page
					if (firstLoad) {
						_this.list = data.offer.list ? data.offer.list : []
					} else {
						_this.list = _this.list.concat(data.offer.list)
					}
					_this.nomore = data.nomore
				})
			},
			//拨号并记录
			dialing(call_type, client_uid, mobile) {
				console.log(call_type, client_uid, mobile)
				_this.$api.post("calllog", {
					calllog_uid: client_uid,
					call_type: call_type
				}).then(data => {
					_this.$plug.dialing(mobile)
				});
			},

			// 切换
			settab(e) {
				_this.click_shake(function() {
					_this.order_type = e
					$paginator = new _this.$paginator(_this.$api)
					_this.getdata(true)
				})
			},
			//筛选
			select(e) {
				_this.status = e
				if (e == 1) {
					if (_this.price == "") {
						_this.price = "up"
					} else if (_this.price == "up") {
						_this.price = "down"
					} else {
						_this.price = "up"
					}
				} else {
					_this.price = ""
				}
				if (e == 2) {
					if (_this.load == "") {
						_this.load = "up"
					} else if (_this.load == "up") {
						_this.load = "down"
					} else {
						_this.load = "up"
					}
				} else {
					_this.load = ""
				}
				$paginator = new _this.$paginator(_this.$api)
				_this.getdata(true)
			},

			// 关注
			attention(e, index) {
				// this.list[index].is_follow = 1
				// console.log(list)
				// return
				_this.$api.get("savefollow", {
					select_type: 1,
					types: 3,
					id: e.client_uid
				}).then(data => {
					// console.log(_this.shop.offer.list[index].is_follow)
					// _this.shop.offer.list[index].is_follow == 1 ? 0 : 1
					// console.log(_this.shop.offer.list[index].is_follow)
					$paginator = new _this.$paginator(_this.$api)
					_this.getdata(true)
				});
			},

			// 一键拨打
			tell(e, index) {
				_this.click_shake(function() {
					_this.$api.get("callStatus", {
						id: e.id
					}).then(data => {
						_this.list[index].is_connect = 2
						_this.$plug.dialing(e.mobile)
					});
				})
			},

			// 备选
			beixuan(e, index) {
				_this.click_shake(function() {
					_this.$api.get("Spare", {
						id: e.id
					}).then(data => {
						$paginator = new _this.$paginator(_this.$api)
						_this.getdata(true)
					});
				})
			},
			//采纳
			getgood(e) {
				_this.click_shake(function() {
					_this.$api.get("adoption", {
						id: e.id
					}).then(data => {
						$paginator = new _this.$paginator(_this.$api)
						_this.getdata(true)
					});
				})
			},

			//搜索
			demand() {
				$paginator = new _this.$paginator(_this.$api)
				_this.getdata(true)
			},
			clear() {
				_this.searchKey = ""
				$paginator = new _this.$paginator(_this.$api)
				_this.getdata(true)
			},

			//导航
			openmap(e) {
				console.log(e)
				uni.openLocation({
					latitude: Number(e.lat),
					longitude: Number(e.lon),
					name: e.shop_name,
					address: e.city,
					success: function() {
						console.log('success');
					}
				});
			},

			// 防抖点击
			click_shake(fn) {
				if (!_this.shake) {
					fn && typeof fn === 'function' && fn()
					_this.shake = true
					setTimeout(function() {
						_this.shake = false
					}, 500)
				}
			},

			// 跳转到聊天
			chat(e) {
				let list = {}
				list = {
					to_id: e.client_uid,
					from_id: wx.getStorageSync('client_uid'),
					name: e.shop_name,
				}
				console.log(list)
				wx.setStorageSync('list', list)
				uni.navigateTo({
					url: '/chat/chatingroom?type=2' + '&member_type=1'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		font-family: PingFang SC;
	}

	.block {
		height: 10rpx;
		background-color: #F2F2F2;
	}

	.goods {
		padding: 36rpx 25rpx;
		font-size: 24rpx;
		font-weight: 300;
		color: #999999;

		.goodsName {
			font-size: 30rpx;
			color: #333333;
		}

		.flex_bet_align {
			margin: 23rpx 0;
		}

		.count {
			font-size: 28rpx;
			color: #38be8c;
		}
	}

	.m20 {
		margin-top: 20rpx;
	}

	.wrap {
		padding: 30rpx;

		.item {
			padding-bottom: 60rpx;
			border-bottom: 1rpx solid #EEEEEE;

			.imghead {
				width: 110rpx;
				height: 110rpx;
				border-radius: 50%;
				margin-right: 25rpx;
			}

			.attention {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 107rpx;
				background: #38be8c;
				border-radius: 40rpx;
				text-align: center;
				border: 1rpx solid #38be8c;
				padding: 6rpx 0;
				font-size: 26rpx;
				color: #FFFFFF;
			}

			.center {
				margin-top: 30rpx;

				.top {
					font-size: 36rpx;
				}

				.title {
					color: #333333;
					font-size: 36rpx;
					margin-top: 20rpx;
				}



				.addw {
					font-size: 30rpx;
					color: #B3B3B3;
					margin-top: 20rpx;
				}
			}

			.tbtn {
				border: 1px solid #92CDFF;
				padding: 5rpx 20rpx;
				border-radius: 30rpx;
				color: #92CDFF;
				margin-right: 10rpx;
			}

			.line {
				border: 2rpx solid #38be8c;
				color: #38be8c;
			}

			.have {
				color: #fff;
				background: #38be8c;
			}

			.iconfont {
				width: 45rpx;
				height: 45rpx;
				color: #FFFFFF;
				border-radius: 50%;
				font-size: 24rpx;
				text-align: center;
				line-height: 45rpx;
				background: #4bacff;
			}

			.iconfont:nth-child(2) {
				background-color: #38BE8C;
				margin-left: 10rpx;
			}

			.hover_box {
				margin-bottom: 8rpx;
				display: flex;
				flex-direction: row;
				align-items: center;

				image {
					height: 36rpx;
					margin-left: 20rpx;
					max-width: 150rpx;
				}

				.xinyong_box {
					display: flex;
					flex-direction: row;
					align-items: center;
					margin-left: 8rpx;

					.xin {
						width: 30rpx;
						height: 30rpx;
						background: #00C575;
						border-radius: 3px 0 0 3rpx;
						text-align: center;
						line-height: 30rpx;
						color: #fff;
						font-size: 20rpx;
					}

					.xin_number {
						background-color: #fff;
						border: 2rpx solid #00C575;
						border-radius: 0 3rpx 3rpx 0;
						color: #00C575;
						font-size: 20rpx;
						text-align: center;
						height: 30rpx;
						line-height: 30rpx;
						min-width: 46rpx;
					}
				}
			}

			.text {
				font-size: 24rpx;
				font-weight: 300;
				color: #999999;
			}

			.gallery {
				margin-top: 30rpx;

				.img {
					width: 210rpx;
					height: 210rpx;
					border-radius: 8rpx;
					background-color: #EEEEEE;
					margin-right: 25rpx;
				}

				.img:nth-child(3) {
					margin-right: 0;
				}
			}
		}
	}

	.search {
		padding: 20rpx 40rpx;

		.left {
			flex: 1;

			.sort {
				margin-right: 30rpx;
			}

			.iconbox {
				display: flex;
				flex-direction: column;
				margin-left: 6rpx;
			}
		}

		.searchContent {
			width: 340rpx;
			height: 74rpx;
			border-radius: 37rpx;
			background: #fff;
			display: flex;
			flex-direction: row;
			align-items: center;
			border: 2rpx solid #868686;

			.search_icon {
				margin-left: 32rpx;
			}

			.search_icon_c {
				margin-right: 32rpx;
			}

			.search_ {
				color: #2C3240;
				font-size: 26rpx;
				flex: 1;
				margin: 0 14rpx;
			}
		}

		.check {
			color: #38BE8C;
		}
	}
</style>
